<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right">                  
      </div>
    </div>
    <div class="content-wrap">
      <div class="chart-content">
          <el-table :data="data" :row-style="{height:'.2rem'}" :cell-style="{padding:'.068rem'}" highlight-current-row stripe :header-cell-style="{background:'#062F58',color:'#ffffff'}" :row-class-name="tableRowClassName">
            <el-table-column prop="id" label="序号" width="50"></el-table-column>
            <el-table-column prop="hname" label="医院名称" width="160" align="center"></el-table-column>
            <el-table-column prop="eincome" align="center" label="门急诊医疗收入"></el-table-column>
            <el-table-column prop="mincome" align="center" label="门急诊药品收入"></el-table-column>
            <el-table-column prop="rincome" align="center" label="医保医疗收入" ></el-table-column>
            <el-table-column prop="zincome" align="center" label="医保药品收入" ></el-table-column>
            <el-table-column prop="aincome" align="center" label="住院医疗收入"></el-table-column>
            <el-table-column prop="bincome" align="center" label="住院药品收入"></el-table-column>
            <el-table-column prop="cincome" align="center" label="住院医保医疗收入" ></el-table-column>
            <el-table-column prop="dincome" align="center" label="住院医保药品收入"></el-table-column>
          </el-table>
      </div>  
    </div>
    <img src="@/assets/images/13553.png" class="card819" alt="">
  </Fragment>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-single-analysis4-yiyuanshouru',
  components:{Fragment},
  props:{
    title:{
      type:String
    },
    data:{
      type:Array
    }
  },
  mounted(){
    this.makeData()
  },
  methods:{
    makeData(){
      // 住院业务量占比
      const option71 = {
          backgroundColor: '',
          "grid": {
              "top": 30,
              "bottom": 50,

          },
          "tooltip": {},
          "xAxis": {
              "data": ["医院入院占比", "机构入院占比"],
              "axisTick": {
                  "show": false
              },
              "axisLine": {
                  "show": false
              },
              "axisLabel": {
                  interval:0,
                  textStyle: {
                      color:  '#beceff',
                      fontSize:14,
                  },
                  margin: 30, //刻度标签与轴线之间的距离。
              }
          },
          "yAxis": {
              "splitLine": {
                  "show": false
              },
              "axisTick": {
                  "show": false
              },
              "axisLine": {
                  "show": false
              },
              "axisLabel": {
                  "show": false
              }
          },
          "series": [{
              "name": "",
              "type": "pictorialBar",
              "symbolSize": [20, 9],
              "symbolOffset": [0, -4],
              "z": 12,
              "data": [ {
                  "name": "机构入院占比",
                  "value": "1000",
                  "trueVal": "100",
                  "symbolPosition": "end",
                  "itemStyle": {
                      "normal": {
                          "color": "#ffcc00" //圆柱顶部颜色
                      }
                  }
              },{
                  "name": "医院入院占比",
                  "value": "981",
                  "trueVal": "98",
                  "symbolPosition": "end",
                  "itemStyle": {
                      "normal": {
                          "color": "#01CF77"  //圆柱顶部颜色
                          
                      }
                  }
              }]
          }, {
              "name": "",
              "type": "pictorialBar",
              "symbolSize": [20, 9],
              "symbolOffset": [0, 4],
              "z": 12,
              "data": [{
                  "name": "机构入院占比",
                  "value": "1000",
                  "trueVal": "100",
                  "itemStyle": {
                      "normal": {
                          "color": "#ff7800" //圆柱底部颜色
                      }
                  }
              },{
                  "name": "医院入院占比",
                  "value": "981",
                  "trueVal": "98",
                  "itemStyle": {
                      "normal": {
                          "color": "#01CF78" //圆柱底部颜色
                      }
                  }
              }]
          }, {
              "name": "",
              "type": "pictorialBar",
              "symbolSize": [55, 30],
              "symbolOffset": [0, 16],
              "z": 11,
              "data": [ {
                  "name": "机构入院占比",
                  "value": "1000",
                  "trueVal": "100",
                  "itemStyle": {
                      "normal": {
                          "color": "transparent",
                          "borderColor": "#ff7800", //底部内圆圈颜色
                          "borderWidth": 5
                      }
                  }
              },{
                  "name": "医院入院占比",
                  "value": "981",
                  "trueVal": "98",
                  "itemStyle": {
                      "normal": {
                          "color": "transparent",
                          "borderColor": "#01CF78", //底部内圆圈颜色
                          "borderWidth": 5
                      }
                  }
              }]
          }, {
              "name": "",
              "type": "pictorialBar",
              "symbolSize": [35, 18],
              "symbolOffset": [0, 10],
              "z": 10,
              "data": [ {
                  "name": "机构入院占比",
                  "value": "1000",
                  "trueVal": "100",
                  "itemStyle": {
                      "normal": {
                          "color": "transparent",
                          "borderColor": "#ff7800", //底部外圆圈颜色
                          "borderType": "dashed",
                          "borderWidth": 5
                      }
                  }
              },{
                  "name": "医院入院占比",
                  "value": "981",
                  "trueVal": "98",
                  "itemStyle": {
                      "normal": {
                          "color": "transparent",
                          "borderColor": "#047054",  //底部外圆圈颜色
                          "borderType": "dashed",
                          "borderWidth": 5
                      }
                  }
              }]
          }, {
              
              "type": "bar",
              "silent": true,
              "barWidth": 20,
              "barGap": "-100%",
              
              "data": [ {
                  "name": "机构入院占比",
                  "value": "1000",
                  "trueVal": "100",
                  "label": {
                  "normal": {
                      "show": true,
                      "position": "top",
                      "distance": 10,
                      "textStyle": {
                          "color": "#ffcc00", //柱子对应数值颜色
                          "fontSize": 14
                      }
                  }
              },
                  "itemStyle": {
                      "normal": {
                          "color": {
                              "x": 0,
                              "y": 0,
                              "x2": 0,
                              "y2": 1,
                              "type": "linear",
                              "global": false,
                              "colorStops": [{
                                  "offset": 0,
                                  "color": "rgba(30,34,48,1)"
                              }, {
                                  "offset": 1,
                                  "color": "#ff7800" //底部渐变颜色
                              }]
                          }
                      }
                  }
              },{
                  "name": "医院入院占比",
                  "value": "981",
                  "trueVal": "98",
                  "label": {
                  "normal": {
                      "show": true,
                      "position": "top",
                      "distance": 10,
                      "textStyle": {
                          "color": "#01CF77", //柱子对应数值颜色
                          "fontSize": 14
                      }
                  }
              },
                  "itemStyle": {
                      "normal": {
                          "color": {
                              "x": 0,
                              "y": 0,
                              "x2": 0,
                              "y2": 1,
                              "type": "linear",
                              "global": false,
                              "colorStops": [{
                                  "offset": 0,
                                  "color": "rgba(30,36,54,1)"
                              }, {
                                  "offset": 1,
                                  "color": "#00FF8A" //底部渐变颜色
                              }]
                          }
                      }
                  }
              }]
          }]
      }
      this.makeGraph(this.$refs.proportionInpatientBusinessVolume1,option71)

      const option72 = {
          backgroundColor: '',
          "grid": {
              "top": 30,
              "bottom": 50,

          },
          "tooltip": {},
          "xAxis": {
              "data": ["医院入院占比", "机构入院占比"],
              "axisTick": {
                  "show": false
              },
              "axisLine": {
                  "show": false
              },
              "axisLabel": {
                  interval:0,
                  textStyle: {
                      color:  '#beceff',
                      fontSize:14,
                  },
                  margin: 30, //刻度标签与轴线之间的距离。
              }
          },
          "yAxis": {
              "splitLine": {
                  "show": false
              },
              "axisTick": {
                  "show": false
              },
              "axisLine": {
                  "show": false
              },
              "axisLabel": {
                  "show": false
              }
          },
          "series": [{
              "name": "",
              "type": "pictorialBar",
              "symbolSize": [20, 9],
              "symbolOffset": [0, -4],
              "z": 12,
              "data": [ {
                  "name": "机构入院占比",
                  "value": "1000",
                  "trueVal": "100",
                  "symbolPosition": "end",
                  "itemStyle": {
                      "normal": {
                          "color": "#ffcc00" //圆柱顶部颜色
                      }
                  }
              },{
                  "name": "医院入院占比",
                  "value": "981",
                  "trueVal": "98",
                  "symbolPosition": "end",
                  "itemStyle": {
                      "normal": {
                          "color": "#01CF77"  //圆柱顶部颜色
                          
                      }
                  }
              }]
          }, {
              "name": "",
              "type": "pictorialBar",
              "symbolSize": [20, 9],
              "symbolOffset": [0, 4],
              "z": 12,
              "data": [{
                  "name": "机构入院占比",
                  "value": "1000",
                  "trueVal": "100",
                  "itemStyle": {
                      "normal": {
                          "color": "#ff7800" //圆柱底部颜色
                      }
                  }
              },{
                  "name": "医院入院占比",
                  "value": "981",
                  "trueVal": "98",
                  "itemStyle": {
                      "normal": {
                          "color": "#01CF78" //圆柱底部颜色
                      }
                  }
              }]
          }, {
              "name": "",
              "type": "pictorialBar",
              "symbolSize": [55, 30],
              "symbolOffset": [0, 16],
              "z": 11,
              "data": [ {
                  "name": "机构入院占比",
                  "value": "1000",
                  "trueVal": "100",
                  "itemStyle": {
                      "normal": {
                          "color": "transparent",
                          "borderColor": "#ff7800", //底部内圆圈颜色
                          "borderWidth": 5
                      }
                  }
              },{
                  "name": "医院入院占比",
                  "value": "981",
                  "trueVal": "98",
                  "itemStyle": {
                      "normal": {
                          "color": "transparent",
                          "borderColor": "#01CF78", //底部内圆圈颜色
                          "borderWidth": 5
                      }
                  }
              }]
          }, {
              "name": "",
              "type": "pictorialBar",
              "symbolSize": [35, 18],
              "symbolOffset": [0, 10],
              "z": 10,
              "data": [ {
                  "name": "机构入院占比",
                  "value": "1000",
                  "trueVal": "100",
                  "itemStyle": {
                      "normal": {
                          "color": "transparent",
                          "borderColor": "#ff7800", //底部外圆圈颜色
                          "borderType": "dashed",
                          "borderWidth": 5
                      }
                  }
              },{
                  "name": "医院入院占比",
                  "value": "981",
                  "trueVal": "98",
                  "itemStyle": {
                      "normal": {
                          "color": "transparent",
                          "borderColor": "#047054",  //底部外圆圈颜色
                          "borderType": "dashed",
                          "borderWidth": 5
                      }
                  }
              }]
          }, {
              
              "type": "bar",
              "silent": true,
              "barWidth": 20,
              "barGap": "-100%",
              
              "data": [ {
                  "name": "机构入院占比",
                  "value": "1000",
                  "trueVal": "100",
                  "label": {
                  "normal": {
                      "show": true,
                      "position": "top",
                      "distance": 10,
                      "textStyle": {
                          "color": "#ffcc00", //柱子对应数值颜色
                          "fontSize": 14
                      }
                  }
              },
                  "itemStyle": {
                      "normal": {
                          "color": {
                              "x": 0,
                              "y": 0,
                              "x2": 0,
                              "y2": 1,
                              "type": "linear",
                              "global": false,
                              "colorStops": [{
                                  "offset": 0,
                                  "color": "rgba(30,34,48,1)"
                              }, {
                                  "offset": 1,
                                  "color": "#ff7800" //底部渐变颜色
                              }]
                          }
                      }
                  }
              },{
                  "name": "医院入院占比",
                  "value": "981",
                  "trueVal": "98",
                  "label": {
                  "normal": {
                      "show": true,
                      "position": "top",
                      "distance": 10,
                      "textStyle": {
                          "color": "#01CF77", //柱子对应数值颜色
                          "fontSize": 14
                      }
                  }
              },
                  "itemStyle": {
                      "normal": {
                          "color": {
                              "x": 0,
                              "y": 0,
                              "x2": 0,
                              "y2": 1,
                              "type": "linear",
                              "global": false,
                              "colorStops": [{
                                  "offset": 0,
                                  "color": "rgba(30,36,54,1)"
                              }, {
                                  "offset": 1,
                                  "color": "#00FF8A" //底部渐变颜色
                              }]
                          }
                      }
                  }
              }]
          }]
      }
      this.makeGraph(this.$refs.proportionInpatientBusinessVolume2,option72)

      const option73 = {
          backgroundColor: '',
          "grid": {
              "top": 30,
              "bottom": 50,

          },
          "tooltip": {},
          "xAxis": {
              "data": ["医院入院占比", "机构入院占比"],
              "axisTick": {
                  "show": false
              },
              "axisLine": {
                  "show": false
              },
              "axisLabel": {
                  interval:0,
                  textStyle: {
                      color:  '#beceff',
                      fontSize:14,
                  },
                  margin: 30, //刻度标签与轴线之间的距离。
              }
          },
          "yAxis": {
              "splitLine": {
                  "show": false
              },
              "axisTick": {
                  "show": false
              },
              "axisLine": {
                  "show": false
              },
              "axisLabel": {
                  "show": false
              }
          },
          "series": [{
              "name": "",
              "type": "pictorialBar",
              "symbolSize": [20, 9],
              "symbolOffset": [0, -4],
              "z": 12,
              "data": [ {
                  "name": "机构入院占比",
                  "value": "1000",
                  "trueVal": "100",
                  "symbolPosition": "end",
                  "itemStyle": {
                      "normal": {
                          "color": "#ffcc00" //圆柱顶部颜色
                      }
                  }
              },{
                  "name": "医院入院占比",
                  "value": "981",
                  "trueVal": "98",
                  "symbolPosition": "end",
                  "itemStyle": {
                      "normal": {
                          "color": "#01CF77"  //圆柱顶部颜色
                          
                      }
                  }
              }]
          }, {
              "name": "",
              "type": "pictorialBar",
              "symbolSize": [20, 9],
              "symbolOffset": [0, 4],
              "z": 12,
              "data": [{
                  "name": "机构入院占比",
                  "value": "1000",
                  "trueVal": "100",
                  "itemStyle": {
                      "normal": {
                          "color": "#ff7800" //圆柱底部颜色
                      }
                  }
              },{
                  "name": "医院入院占比",
                  "value": "981",
                  "trueVal": "98",
                  "itemStyle": {
                      "normal": {
                          "color": "#01CF78" //圆柱底部颜色
                      }
                  }
              }]
          }, {
              "name": "",
              "type": "pictorialBar",
              "symbolSize": [55, 30],
              "symbolOffset": [0, 16],
              "z": 11,
              "data": [ {
                  "name": "机构入院占比",
                  "value": "1000",
                  "trueVal": "100",
                  "itemStyle": {
                      "normal": {
                          "color": "transparent",
                          "borderColor": "#ff7800", //底部内圆圈颜色
                          "borderWidth": 5
                      }
                  }
              },{
                  "name": "医院入院占比",
                  "value": "981",
                  "trueVal": "98",
                  "itemStyle": {
                      "normal": {
                          "color": "transparent",
                          "borderColor": "#01CF78", //底部内圆圈颜色
                          "borderWidth": 5
                      }
                  }
              }]
          }, {
              "name": "",
              "type": "pictorialBar",
              "symbolSize": [35, 18],
              "symbolOffset": [0, 10],
              "z": 10,
              "data": [ {
                  "name": "机构入院占比",
                  "value": "1000",
                  "trueVal": "100",
                  "itemStyle": {
                      "normal": {
                          "color": "transparent",
                          "borderColor": "#ff7800", //底部外圆圈颜色
                          "borderType": "dashed",
                          "borderWidth": 5
                      }
                  }
              },{
                  "name": "医院入院占比",
                  "value": "981",
                  "trueVal": "98",
                  "itemStyle": {
                      "normal": {
                          "color": "transparent",
                          "borderColor": "#047054",  //底部外圆圈颜色
                          "borderType": "dashed",
                          "borderWidth": 5
                      }
                  }
              }]
          }, {
              
              "type": "bar",
              "silent": true,
              "barWidth": 20,
              "barGap": "-100%",
              
              "data": [ {
                  "name": "机构入院占比",
                  "value": "1000",
                  "trueVal": "100",
                  "label": {
                  "normal": {
                      "show": true,
                      "position": "top",
                      "distance": 10,
                      "textStyle": {
                          "color": "#ffcc00", //柱子对应数值颜色
                          "fontSize": 14
                      }
                  }
              },
                  "itemStyle": {
                      "normal": {
                          "color": {
                              "x": 0,
                              "y": 0,
                              "x2": 0,
                              "y2": 1,
                              "type": "linear",
                              "global": false,
                              "colorStops": [{
                                  "offset": 0,
                                  "color": "rgba(30,34,48,1)"
                              }, {
                                  "offset": 1,
                                  "color": "#ff7800" //底部渐变颜色
                              }]
                          }
                      }
                  }
              },{
                  "name": "医院入院占比",
                  "value": "981",
                  "trueVal": "98",
                  "label": {
                  "normal": {
                      "show": true,
                      "position": "top",
                      "distance": 10,
                      "textStyle": {
                          "color": "#01CF77", //柱子对应数值颜色
                          "fontSize": 14
                      }
                  }
              },
                  "itemStyle": {
                      "normal": {
                          "color": {
                              "x": 0,
                              "y": 0,
                              "x2": 0,
                              "y2": 1,
                              "type": "linear",
                              "global": false,
                              "colorStops": [{
                                  "offset": 0,
                                  "color": "rgba(30,36,54,1)"
                              }, {
                                  "offset": 1,
                                  "color": "#00FF8A" //底部渐变颜色
                              }]
                          }
                      }
                  }
              }]
          }]
      }
      this.makeGraph(this.$refs.proportionInpatientBusinessVolume3,option73)
    },
    makeGraph(ref,option){
      let myChart=echarts.init(ref)
      myChart.setOption(option)
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
          return "warning-row"; //类名
      } else {
          return "success-row"; //类名
      }
    },
  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
    }
  }
  .content-wrap{
    width: 100%;
    // height:calc( (100vh - 1.23rem) * 2 / 3 - .36rem) ;
    height:calc( (100vh - 1.23rem) * 602 / 947 - .3rem) !important;
    .chart-content{
      width: 100%;
    //   height:calc( (100vh - 1.23rem) * 2 /  3 - .36rem) ;
      height:calc( (100vh - 1.23rem) * 602 / 947 - .35rem ) !important;
      float: left;
      overflow: hidden;
      padding:.1rem 0;
      .el-table{
        font-size: .14rem;
        background:none !important;
        color:#ffffff !important;
        /deep/.warning-row {
          background: #062F58 !important
        }
        /deep/.success-row {
          background: none;
        }
        /deep/.el-table__body tr.current-row>td{
          background:#062F58 !important
        }
        /deep/.el-table__body tr:hover > td.el-table__cell{
          background:none !important
        }          
      }
      /deep/.el-table__header tr,.el-table__header th {
          padding: 0;
          margin:0;
          height: .2rem;
      }
      /deep/.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
        height: .2rem;
        font-size: .14rem;
      }
      /deep/.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td {
          background:#062F58; /*替换为你需要的颜色，觉得优先级不够就加!important*/
          font-size: .14rem;
      }
      /deep/ .el-table--medium .el-table__cell{
        padding:.05rem 0;
        font-size: .14rem;
      }
    }
  }
  img{width: 100%;float: left;}
</style>